<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marquee</title>
    <link rel="stylesheet" href="../css/marquee.scss">
</head>
<body>
    <marquee behavior="" direction="">说的dei!火钳刘明！</marquee>
    <div class="marquee">
        <div class="content">
            <div class="list"><img src="../img/1.jpg" alt=""></div>
            <div class="list"><img src="../img/2.jpg" alt=""></div>
            <div class="list"><img src="../img/3.jpg" alt=""></div>
            <div class="list"><img src="../img/4.jpg" alt=""></div>
        </div>
    </div>
</body>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
    $(()=>{
        console.log('页面元素加载完毕之后执行')
        const outerWidth = 640,
            outerHeight = 425,
            speed = 3;
        var $marquee = $('.marquee');
        var $content = $marquee.find('.content')
        var $list = $content.find('.list')
        var listLength = $list.length;
        var contentWidth = outerWidth*listLength;
        // 获取页面加载的样式
        var style = document.styleSheets
        $marquee.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        });
        $list.css({
            "width": `${outerWidth}px`,
            "height": `${outerHeight}px`
        });
        $content.css({
            "width": `${contentWidth}px`,
            "height": `${outerHeight}px`,
            "animation": `run ${speed*listLength}s linear infinite`
        });
        style[0].insertRule(`@keyframes run{
            100%{
                transform: translateX(-${contentWidth}px);
            }
        }`)
        var clone = $list.eq(0).clone();
        $content.append(clone);

    })
</script>
</html>